<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经营单位月度数据曲线图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(90deg, #3498db, #2c3e50);
            color: white;
            padding: 20px 30px;
        }
        .header h1 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .header p {
            opacity: 0.9;
            font-size: 14px;
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
        }
        .chart-container {
            flex: 1;
            min-width: 500px;
            height: 500px;
            padding: 15px;
        }
        .controls {
            width: 250px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-left: 20px;
        }
        .controls h3 {
            margin-bottom: 15px;
            color: #2c3e50;
            border-bottom: 1px solid #eaeaea;
            padding-bottom: 10px;
        }
        .unit-list {
            max-height: 400px;
            overflow-y: auto;
        }
        .unit-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            padding: 8px 12px;
            background: white;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            transition: all 0.2s;
        }
        .unit-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .unit-item input {
            margin-right: 10px;
            transform: scale(1.2);
        }
        .unit-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .footer {
            text-align: center;
            padding: 15px;
            color: #7f8c8d;
            font-size: 14px;
            border-top: 1px solid #eee;
        }
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            .chart-container {
                min-width: 100%;
                height: 400px;
            }
            .controls {
                width: 100%;
                margin-left: 0;
                margin-top: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>经营单位月度数据曲线图</h1>
            <p>展示7个经营单位12个月的数据趋势，默认显示3个单位，可自由选择查看</p>
        </div>
        
        <div class="content">
            <div class="chart-container" id="mainChart"></div>
            
            <div class="controls">
                <h3>选择经营单位</h3>
                <div class="unit-list" id="unitList">
                    <!-- 单位列表将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>数据更新时间: 2023年12月 | 技术支持: 数据分析部</p>
        </div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('mainChart');
        const myChart = echarts.init(chartDom);
        
        // 模拟数据 - 7个经营单位12个月的数据
        const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        const units = [
            { id: 'unit1', name: '华东事业部', color: '#5470c6' },
            { id: 'unit2', name: '华南事业部', color: '#91cc75' },
            { id: 'unit3', name: '华北事业部', color: '#fac858' },
            { id: 'unit4', name: '西南事业部', color: '#ee6666' },
            { id: 'unit5', name: '西北事业部', color: '#73c0de' },
            { id: 'unit6', name: '东北事业部', color: '#3ba272' },
            { id: 'unit7', name: '华中事业部', color: '#fc8452' }
        ];
        
        // 生成随机数据
        function generateData() {
            const data = {};
            units.forEach(unit => {
                data[unit.id] = [];
                let baseValue = Math.random() * 500 + 100; // 基础值
                for (let i = 0; i < 12; i++) {
                    // 模拟月度波动
                    const value = baseValue + Math.random() * 200 - 100;
                    data[unit.id].push(Math.round(value));
                    baseValue = value * 0.9 + baseValue * 0.1; // 平滑变化
                }
            });
            return data;
        }
        
        const unitData = generateData();
        
        // 初始化默认选中的单位（前3个）
        let selectedUnits = ['unit1', 'unit2', 'unit3'];
        
        // 渲染单位选择列表
        function renderUnitList() {
            const unitList = document.getElementById('unitList');
            unitList.innerHTML = '';
            
            units.forEach(unit => {
                const isChecked = selectedUnits.includes(unit.id);
                
                const unitItem = document.createElement('div');
                unitItem.className = 'unit-item';
                unitItem.innerHTML = `
                    <input type="checkbox" id="${unit.id}" ${isChecked ? 'checked' : ''}>
                    <div class="unit-color" style="background-color: ${unit.color}"></div>
                    <label for="${unit.id}">${unit.name}</label>
                `;
                
                unitList.appendChild(unitItem);
                
                // 添加事件监听
                const checkbox = unitItem.querySelector('input');
                checkbox.addEventListener('change', function() {
                    if (this.checked) {
                        selectedUnits.push(unit.id);
                    } else {
                        selectedUnits = selectedUnits.filter(id => id !== unit.id);
                    }
                    updateChart();
                });
            });
        }
        
        // 更新图表
        function updateChart() {
            const series = [];
            const legendData = [];
            
            selectedUnits.forEach(unitId => {
                const unit = units.find(u => u.id === unitId);
                if (unit) {
                    series.push({
                        name: unit.name,
                        type: 'line',
                        data: unitData[unitId],
                        smooth: true,
                        lineStyle: {
                            width: 3
                        },
                        itemStyle: {
                            color: unit.color
                        },
                        symbol: 'circle',
                        symbolSize: 8,
                        emphasis: {
                            focus: 'series',
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: '#fff',
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        }
                    });
                    legendData.push(unit.name);
                }
            });
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        let result = `<div style="font-weight:bold;margin-bottom:5px;">${params[0].axisValue}</div>`;
                        params.forEach(item => {
                            result += `
                                <div style="display:flex;align-items:center;margin:5px 0;">
                                    <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${item.color};margin-right:5px;"></span>
                                    <span style="flex:1;">${item.seriesName}:</span>
                                    <span style="font-weight:bold;margin-left:10px;">${item.value}</span>
                                </div>
                            `;
                        });
                        return result;
                    }
                },
                legend: {
                    data: legendData,
                    top: 10,
                    textStyle: {
                        fontSize: 12
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: months,
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '经营指标',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#f0f0f0',
                            type: 'dashed'
                        }
                    }
                },
                series: series
            };
            
            myChart.setOption(option, true);
        }
        
        // 初始化
        renderUnitList();
        updateChart();
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>